<template>
    <div class="amap-page-container">
      <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo">
        <!-- <el-amap-marker vid="component-marker" :position="componentMarker.position" :content-render="componentMarker.contentRender" ></el-amap-marker> -->
        <template v-if="markers!=null && markers.length>0">
        <el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable" :vid="index"></el-amap-marker>
        </template>
      <el-date-picker
        v-model="date"
        type="date"
        :clearable="false"
        value-format="yyyy/MM/dd"
        class="date"
        @change="changeDate"
        placeholder="选择日期">
      </el-date-picker>
      </el-amap>
     
      <el-dialog
        title="提示"
        :visible.sync="show"
        width="30%"
        center>
        <span>纬度：{{violation.latitude}} 经度：{{violation.longitude}}</span>
        <el-form ref="form" :model="violation" label-width="80px">
          <el-select v-model="violation.type" placeholder="请选择违规类型">
            <el-option label="超速" value="1"></el-option>
            <el-option label="急加速" value="2"></el-option>
            <el-option label="急减速" value="3"></el-option>
            <el-option label="急刹车" value="4"></el-option>
            <el-option label="急转弯" value="5"></el-option>
            <el-option label="疲劳驾驶" value="6"></el-option>
          </el-select>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="show = false">取 消</el-button>
          <el-button type="primary" @click="clickSave()">确 定</el-button>
        </span>
</el-dialog>
    </div>
  </template>


<script>
  // const exampleComponents = {
  //   props: ['text'],
  //   template: `<div>text from  parent: {{text}}</div>`
  // }
  import { listByDate } from '@/apis/track.js'
  import { save } from '@/apis/violation'
  import {formatDate} from '@/utils/date.js'
export default {
    created () {
      this.date = formatDate(new Date(), 'yyyy/MM/dd')
      this.changeDate()
    },
    data () {
      return {
        count: 1,
        date: new Date(),
        violation: {
          date: '',
          type: '',
          longitude: '',
          latitude: ''
        },
        // slotStyle: {
        //   padding: '2px 8px',
        //   background: '#eee',
        //   color: '#333',
        //   border: '1px solid #aaa'
        // },
        zoom: 14,
        show: false,
        center: [121.5273285, 31.21515044],
        markers: [
          // {
          //   position: [121.5273285, 31.21515044],
          //   events: {
          //     click: () => {
          //       // alert('121.5273285, 31.21515044')
          //     }
          //   },
          //   visible: true,
          //   draggable: false,
          //   template: '<span>1</span>'
          // }
        ],
        longitude: '',
        latitude: '',
        // renderMarker: {
        //   position: [121.5273285, 31.21715058],
        //   contentRender: (h, instance) => {
        //     // if use jsx you can write in this
        //     // return <div style={{background: '#80cbc4', whiteSpace: 'nowrap', border: 'solid #ddd 1px', color: '#f00'}} onClick={() => ...}>marker inner text</div>
        //     return h(
        //       'div',
        //       {
        //         style: {background: '#80cbc4', whiteSpace: 'nowrap', border: 'solid #ddd 1px', color: '#f00'},
        //         on: {
        //           click: () => {
        //             // const position = this.renderMarker.position
        //             // this.renderMarker.position = [position[0] + 0.002, position[1] - 0.002]
        //           }
        //         }
        //       },
        //       ['marker inner text']
        //     )
        //   }
        // },
        // componentMarker: {
        //   position: [121.5273285, 31.21315058]
        //   // contentRender: (h, instance) => h(exampleComponents, {style: {backgroundColor: '#fff'}, props: {text: 'father is here'}}, ['xxxxxxx'])
        // },
        slotMarker: {
          position: [121.5073285, 31.21715058]
        }
      }
    },
    methods: {
      onClick () {
        this.count += 1
      },
      clickSave () {
        save(this.violation).then(e => {
          if (e.data) {
            this.$message('新建成功')
            this.$refs.form.resetFields()
            this.show = false
          } else {
            this.$message('修改成功')
            this.$refs.form.resetFields()
            this.show = false
          }
        })
      },
      changeDate () {
        listByDate(this.date).then(e => {
          const points = e.data
          this.markers = []
          for (let index = 0; index < points.length; index++) {
            const element = points[index]
            var marker = {
              position: [element.longitude, element.latitude],
              events: {
                click: () => {
                  this.show = true
                  this.violation.latitude = element.latitude
                  this.violation.longitude = element.longitude
                  this.violation.date = formatDate(this.date, 'yyyy-MM-dd')
                }
              },
              visible: true,
              draggable: false,
              template: '<span>1</span>'
            }
            this.markers.push(marker)
            if (this.markers.length > 0) {
              this.center = this.markers[0].position
            } else {
              this.$message('没有轨迹')
            }
          }
          // points.forEach(element => {
  
          // })
        })
      }
    },
    name: 'amap-page'
  }
</script>

  <style scoped>
    .amap-demo {
      height: 100%;
      width: 100%;
      position: relative;
    }
    .amap-page-container{
      height: 100%;
      width: 100;
    }
    .date{
      position: absolute;
      top: 0;
      margin-top: 10px;
      margin-left: 10px;
      left: 0;
    }
  </style>